<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		html {
			height: 100%
		}
		body {
			height: 100%;
			margin: 0;
			padding: 0
		}
		#map_canvas {
			height: 100%
		}
	</style>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
	</script>
	<script type="text/javascript">

		//Global Vars
		var usrMarker;
		var trueMarker;
		var map;
		var clickDetected = false;

		function initialize() {
			var myOptions = {
				disableDefaultUI: true,
				center: new google.maps.LatLng(0, 0),
				zoom: 2,
				panControl: true,
				zoomControl: true,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);

			//click listener
			google.maps.event.addListener(map, 'click', function (event) {
				placeUsrMarker(event.latLng);
				clickDetected = true;
			});
		}

		function placeUsrMarker(location) {
			if (usrMarker) {
				usrMarker.setPosition(location);
			} else {
				usrMarker = new google.maps.Marker({
					position: location,
					map: map
				});
			}
		}
		
		function placeTrueMarker(location) {
			if (trueMarker) {
				trueMarker.setPosition(location);
			} else {
				trueMarker = new google.maps.Marker({
					position: location,
					map: map
				});
				trueMarker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
			}
		}
		
	</script>
</head>

<body onload="initialize()">
	<div id="map_canvas" style="width:100%; height:100%"></div>
</body>

</html>